<script setup lang="ts">
import avatar_url from '../../assets/default.png'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const $router = useRouter()
// 退出登录
const logout = () => {
  $router.push({
    path: '/register'
  })
  clearToken()
  userStore.removeUserInfo()
  userStore.removeToken()
}

// 删除本地token
const clearToken = () => {
  localStorage.removeItem('user')
  localStorage.removeItem('setting')
}

const push = (url: string) => {
  $router.push({
    path: url
  })
}
</script>
<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    background-color="#fff"
    text-color="black"
    active-text-color="black"
  >
    <el-menu-item index="/home" class="logo">
      <svg
        t="1696039473308"
        class="icon"
        viewBox="0 0 1084 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5715"
        width="46"
        height="46"
      >
        <path
          d="M720.173176 243.651765l272.384 272.323764a119.265882 119.265882 0 0 1 0 168.658824l-89.690352 89.630118a9.155765 9.155765 0 0 1-12.950589 0L714.992941 599.341176 531.275294 783.058824l-175.465412-175.284706a9.155765 9.155765 0 0 1-1.084235-11.745883l1.084235-1.264941 177.091765-176.850823 174.320941-174.260706c3.614118-3.614118 9.396706-3.614118 12.950588 0z m-412.912941 0c3.614118-3.614118 9.396706-3.614118 13.010824 0l173.959529 173.959529-356.653176 356.653177a9.155765 9.155765 0 0 1-11.685647 1.084235l-1.325177-1.084235L34.936471 684.634353a119.265882 119.265882 0 0 1 0-168.658824L307.2 243.651765z"
          fill="#016DFE"
          p-id="5716"
        ></path>
      </svg>
      <span class="logo_title">腾讯会议</span>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/home/joinMeeting" @click="push('/home/joinMeeting')"
      >加入会议</el-menu-item
    >
    <el-menu-item
      index="/home/createMeeting"
      @click="push('/home/createMeeting')"
      >发起会议</el-menu-item
    >
    <el-sub-menu index="/home/user/baseInfo">
      <template #title>
        <el-avatar
          :src="userStore.userInfo.userInfo?.avatar || avatar_url"
          alt=""
        />
      </template>
      <el-menu-item index="/home/user/baseInfo" class="avatar_item">
        <div class="avatar_card">
          <div class="avatar_card_container">
            <el-row class="avatar_card_top" justify="center" align="middle">
              <el-col :span="7" class="avatar_img_box">
                <el-avatar :size="50" :src="avatar_url" />
              </el-col>
              <el-col :span="17">
                <p class="userName">
                  {{ userStore.userInfo.userInfo?.username }}
                </p>
                <p
                  class="userName_tip"
                  v-if="userStore.userInfo.userInfo?.user_role === '0'"
                >
                  升级成为会员即可不受限制
                </p>
                <p class="userName_tip" v-else>欢迎你，尊敬的会员</p>
              </el-col>
            </el-row>
            <div class="avatar_card_bottom">
              <p>您的权限</p>
              <ul>
                <li>
                  <svg
                    t="1696043284685"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="9451"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
                      p-id="9452"
                      fill="#515151"
                    ></path>
                  </svg>
                  <span v-if="userStore.userInfo.userInfo?.user_role === '0'">
                    4人限时30分钟会议</span
                  >
                  <span v-else> 8人限时60分钟会议</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="avatar_card_tools">
            <el-row justify="center">
              <el-col
                :span="12"
                class="tool"
                @click="push('/home/user/baseInfo')"
              >
                <svg
                  t="1696041236472"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6922"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 128a160 160 0 1 1-160 160A160 160 0 0 1 512 128m0-64a224 224 0 1 0 224 224A224 224 0 0 0 512 64zM704 640a128 128 0 0 1 0 256H320a128 128 0 0 1 0-256h384m0-64H320a192 192 0 0 0 0 384h384a192 192 0 0 0 0-384z"
                    fill="#2c2c2c"
                    p-id="6923"
                  ></path>
                </svg>
                <span>用户中心</span>
              </el-col>
              <el-col :span="12" class="tool" @click="logout">
                <svg
                  t="1696041275840"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8111"
                  width="16"
                  height="16"
                >
                  <path
                    d="M960.512 539.712l-144.768 144.832-48.256-48.256 60.224-60.288H512V512h325.76l-70.272-70.272 48.256-48.256 144.768 144.768-0.704 0.768 0.704 0.704zM704 192a64 64 0 0 0-64-64H192a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64v-64h64v64a128 128 0 0 1-128 128H192a128 128 0 0 1-128-128V192a128 128 0 0 1 128-128h448a128 128 0 0 1 128 128v128h-64V192z"
                    p-id="8112"
                    fill="#2c2c2c"
                  ></path>
                </svg>
                <span>退出登录</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped lang="less">
.logo {
  margin-left: 30px;
}
.logo_title {
  font-size: 20px;
  font-weight: 600;
  margin-left: 10px;
}
.flex-grow {
  flex-grow: 1;
}

.avatar_item {
  height: 230px !important;
  width: 270px !important;
  &:hover {
    color: black !important;
    background-color: transparent !important;
  }
}
.avatar_card {
  height: 100%;
  width: 100%;
  padding: 5px;
  .avatar_card_container {
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(to bottom, #fff, #f3f9ff);
    .avatar_card_top {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: #d9eaff;
      .avatar_img_box {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .userName {
        font-weight: 600;
        font-size: 16px;
      }
      .userName_tip {
        font-size: 12px;
      }
    }
    .avatar_card_bottom {
      width: 100%;
      padding-left: 5px;
      ul {
        li {
          list-style: none;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .avatar_card_tools {
    margin-top: 20px;
    .tool {
      display: flex;
      flex-direction: column;
      align-items: center;
      &:hover {
        svg {
          path {
            fill: #409eff;
          }
        }
        color: #409eff;
      }
    }
  }
}

:deep(.el-menu-item.is-active) {
  border-bottom: none !important;
  color: black !important;
}
:deep(.el-menu-item:not(.is-disabled):hover) {
  background-color: #fff !important;
}
:deep(.el-menu-item:not(.is-disabled)) {
  background-color: #fff !important;
}
</style>
